
<template>
  <div class="outBox">
    <div class="top">
      <div class="title">
        <p style="color: #ffffff">三创赛五邑大学校赛报名管理系统</p>
      </div>
      <div class="middle">
        <div class="searchBox">
          <span class="text1">电话号码：</span>
          <input type="text" @input="query(findPhone)" v-model="findPhone" />
          <span class="text2">队名：</span>
          <input type="text" @input="query(findName)" v-model="findName" />

          <div>
            <el-table
            class="elTable"
              :row-class-name="tableRowClassName"
              height="350"
              width="100"
              style="font-size: 6pt"
              :row-style="{ height: '3px' }"
              :cell-style="{ padding: '1px' }"
              :header-cell-style="{ padding: '3px', borderColor: 'darkgray' }"
              id="mytable"
              ref="multipleTable"
              :data="
                tableData.slice(
                  (currentPage - 1) * pageSize,
                  currentPage * pageSize
                )
              "
              tooltip-effect="dark"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="60"> </el-table-column>
              <el-table-column label="序号" width="70" prop="id"></el-table-column>
              <el-table-column prop="username" label="队长姓名+队伍名称" width="150"></el-table-column>
              <el-table-column prop="phone" label="组长电话号码" width="150" show-overflow-tooltip ></el-table-column>
              <el-table-column  prop="resources" label="上传文件" show-overflow-tooltip></el-table-column>
              <el-table-column prop="date" label="最后一次上传时间" width="150" show-overflow-tooltip></el-table-column>
            </el-table>
            <div class="Btn">
              <el-button @click="toggleSelection(tableData)" type="primary" round>全选</el-button>
              <el-button @click="download({oneFile,multipleSelection})" type="primary" round>下载选中文件</el-button>
              <el-button @click="downloadAll()" type="primary" round>下载全部文件</el-button>
        
            </div>
            <div class="block" style="margin-top: -35px">
              <el-pagination
                align="right"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="tableData.length"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="search1"></div>
  </div>
</template>

<script>

import queryData from '../network/api/queryData'
import downLoadFile from '../network/api/downLoadFile'
import downLoadAllFile from '../network/api/downLoadAllSelectFile'
import getAllData from '../network/api/queryAllData'
import downLoadAll from '../network/api/downLoadAll'

export default { 
  data() {
    return {
      findName: '',//按名字查询
      findPhone: '',//按电话查询
      tableData: [],//保存渲染数据
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页的数据条数
      multipleSelection: [],//用来保存多文件上传的数据
      oneFile: ''//用来保存单文件上传的数据
    };
  },
  mounted() {
    //一开始进来请求数据渲染页面
    getAllData().then(res => {
      this.tableData = res
    })
  },
  methods: {
    //查询方法，每次改变input的内容的发起请求
    query(findparam) {
      //如果输入框中有内容发送查询请求
      if(findparam != '')
      {
        queryData(findparam,'',10,'',false).then(res => {
          console.log(res)
          //将查询到的内容保存到渲染数据
          this.tableData = res.teams
        },err => {{
          this.tableData = err
        }})
      }
      //如果输入框中无内容，请求所有数据
      else
      {
        getAllData().then(res => {
          this.tableData = res
        })
      }
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleAllSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    //选择要下载的文件
    handleSelectionChange(val) {
      if(val.length == 1){
        //如果只选择一个文件，则将这个数据保存在oneFile中
        this.oneFile = val[0].resources.slice(0,val[0].resources.length) //后台要求路径这个数据不能带引号和[]，通过slice切片
        console.log(this.oneFile)
      }
      else
      {
        //选择多个文件
        this.oneFile = ''
        let tempArry = [] //创建一个临时数组，将想要的内容保存到multipleSelection中
        val.forEach((item) => {
          tempArry.push("/root/file/"+item.resources.slice(0,item.resources.length)) //后台要求路径这个数据不能带引号和[]，通过slice切片
        })
      this.multipleSelection = tempArry
      console.log(this.multipleSelection)
      }
    },
    downloadAll() {
      downLoadAll().then()
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    //下载按钮
    download(url) {
      if(this.oneFile != '')
      {
        downLoadFile(url.oneFile).then()
      }
      else
      {
        downLoadAllFile(url.multipleSelection).then()
      }
    },
    // 设置斑马纹
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 === 0) {
        return "statistics-warning-row";
      } else {
        return "";
      }
    }
  }
};
</script>
<style>
.el-table__row.statistics-warning-row {
  background: #f7f7f7;
}
.elTable{
  /* border: 1px dashed #D3D3D3; */
  margin-top: 12pt;
  width: 100%;
}
</style>
<style scoped>
.outBox {
  display: flex;
  justify-content: center;
  /* margin-top: 30pt; */
  /* align-items: center; */
  background: url("./../assets/img/background.jpg");
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 1000px;
  z-index: -10;
  zoom: 1;
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-position: center 0;
}
.top {
  background-color: #3477d9;
  height: 45pt;
  /* line-height: 45pt; */
  width: 80%;
  margin-top: 45pt;
}
.title {
  text-align: right;
  /* 设置外边距 */
  margin-right: 30px;
  height: 56pt;
  line-height: 56pt;
  font-size: 15pt;
  font-family: "STXihei";
  opacity: 80%;
  margin-top: -10pt;
}
.middle {
  background-color: #fff;
  /* height: 40pt; */
}
.searchBox {
  padding: 10pt;
  margin-left: 12pt;
  /* text-align:center; */
  /* vertical-align:middel; */
}
input {
  background-color: #e4e4e4;
  border-radius: 3pt;
  width: 75.77pt;
  height: 17.32pt;
  border: 0;
  outline: none;
  font-size: 6pt;
  opacity: 93%;
}
.text1,
.text2 {
  font-size: 10pt;
  font-family: "STXihei";
}
.text2 {
  margin-left: 29.5pt;
}
.form {
  background-color: #fff;
  width: 600pt;
  margin-top: 1pt;
  margin-left: -22pt;
}
.Btn {
  margin-left: -1vw;
  margin-top: 20px;
  font-size: 1pt;
}
</style>
